<template>
    <div class="flex-center">
        <region-selects v-model="region" @change="regionChange" v-show="showLabel==false"/>
        <region-text v-show="showLabel==true" v-model="region"/>
    </div>
</template>

<script>

import {RegionSelects, RegionText} from 'v-region'
import {isNotNull} from "@/util/common-util";

export default {
    name: "app-address",
    components: {
        RegionSelects,
        RegionText
    },
    props: {
        showLabel: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: 'small'
        },
        initValue: {
            type: Object,
            default: null,
        }
    },
    data() {
        return {
            region: {
                area: '',
                province: '',
                city: '',
                town: ''
            },
            label: '-'
        }
    },
    created() {
        if (isNotNull(this.initValue)) {
            this.init(this.initValue.province, this.initValue.city, this.initValue.area)
        }
    },
    methods: {
        init(province, city, area) {
            this.region.province = province
            this.region.city = city
            this.region.area = area
        },
        regionChange(region) {
            this.$emit('change', this.region)
            this.$emit('output', region)
            console.log(region, 4444)
        }
    }
}
</script>

<style scoped>

</style>
